<template>
<div class="">
    <div class="pr10">
        <div class="analyItem">
            <p class="analyItemTit tx-center">状态</p>
            <div class="analyItemCon">

            </div>
        </div>
    </div>
    <div class="thinScroll pr10" v-scrollHeight="84">
        <router-link tag="div" v-if="allOnJobGCJL.length > 0" :to="routerPath('achievementsCard')" class="analyItem anItemBor" active-class="anItemBor-active">
            <p class="analyItemTit tx-center analyOrange">绩效名片</p>
            <div class="analyItemCon">
                <div class="userPhoto fl">
                    <img v-if="evaluation.img !== null" :src="evaluation.img" alt="">
                    <span class="dis-block">工程经理</span>
                </div>
                <div class="userInfo mt10">
                    <p class="col-md-3">{{evaluation.user_card_no}}</p>
                    <p class="col-md-3"><strong>人员产值</strong></p>
                    <p class="col-md-6"><span class="cGreen">¥{{evaluation.prize}}</span> / <span class="cRed mr10">¥{{evaluation.punish}}</span><span class="month">{{formatDate(evaluation.pointTime)}}</span></p>
                    <div class="col-md-3 fl"><span class="cLightGray pr2">标准</span><span>{{evaluation.greatMore}}万</span></div>
                    <div class="col-md-3 fl"><span class="cLightGray pr2">差额</span> <span>{{evaluation.resultMoney.toFixed(2)}}万</span></div>
                    <div class="col-md-3 fl"><span class="cLightGray pr2">奖罚</span><span>{{evaluation.prizePunish.toFixed(2)}}</span></div>
                    <div class="col-md-3 fl"><span class="cLightGray pr2">状态</span><span class="cLightGray pr8 cGreen">已接通</span></div>
                </div>
                <span class="circlemark circlemark-green">优</span>
            </div>
        </router-link>

    </div>
    <div class="pr10">
        <router-link tag="div" :to="routerPath('achievementsProcessing')" class="analyItem anItemBor" active-class="anItemBor-active">
            <p class="analyItemTit tx-center">处理</p>
            <div class="analyItemCon">

            </div>
        </router-link>
    </div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import { getUserManageMonthEvaluation } from '../Resources/Api'
export default {
    data () {
        return {
            parmasExample: {
                name: '',
                age: ''
            },
            evaluation: {},
            allOnJobGCJL: []
        }
    },
    created () {
        this.getUserManageMonthEvaluation()
    },
    computed: {
        ...mapGetters(['userInfo', 'leftInfo'])
    },
    methods: {
        // 时间转换
        formatDate (value) {
            let date = new Date(value)
            let y = date.getFullYear()
            let MM = date.getMonth() + 1
            MM = MM < 10 ? ('0' + MM) : MM
            return y + '-' + MM
        },
        getUserManageMonthEvaluation () {
            getUserManageMonthEvaluation({
                diqu: this.leftInfo.u_diqu
            }).then(res => {
                if (res.data.StatusCode === 0) {
                    if (res.data.Body.allOnJobGCJL.length > 0) {
                        this.allOnJobGCJL = res.data.Body.allOnJobGCJL
                        this.evaluation = res.data.Body.allOnJobGCJL[0]
                    }
                }
            }).catch(err => {
                console.log(err)
            })
        },
        // 路由跳转路径拼接
        routerPath (path) {
            return this.$route.matched[1].path + '/' + path
        },
        // 直接进行路由跳转路径
        routerPush (path) {
            this.$router.push(this.$route.matched[1].path + '/' + path)
        }
    },
    watch: {
        leftInfo () {
            this.allOnJobGCJL = []
            this.evaluation = {}
            this.getUserManageMonthEvaluation()
        }
    }
}
</script>
<style scoped>
.userPhoto{width:80px;}
.userPhoto img{width:80px;height:60px;border-radius: 50%;}
.userPhoto span{border:1px solid #FF9900;font-weight: bold;color:#FF9900;text-align: center;border-radius: 2px; }
.userInfo{margin-left: 90px;overflow: hidden;padding-right:20px;}
.userInfo .month{border:1px solid #FF9900;font-weight: bold;color:#FF9900;border-radius: 2px;padding:0 5px;}
</style>
